<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />
		<!-- Mobile Devices Support @begin -->
		<meta content="no-cache,must-revalidate" http-equiv="Cache-Control" />
		<meta content="no-cache" http-equiv="pragma" />
		<meta content="0" http-equiv="expires" />
		<meta content="telephone=no, address=no" name="format-detection" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<!-- Mobile Devices Support @end -->
		<title>{$game['title']}</title>
		<link rel="stylesheet" href="{$UrlPath}/css/style.css" />
		<link rel="stylesheet" href="{$UrlPath}/css/main.css">
		<script type="text/javascript" src="{$UrlPath}/js/jquery.js"></script>
		<script type="text/javascript" src="{$UrlPath}/js/common.js"></script>
		<script type="text/javascript" src="{$UrlPath}/js/sq-3.0.0.js"></script>
		<style>
			html {
				font-size: 312.5%;
			}
		</style>
		<script>
			init_rem();

			function init_rem() {
				var iw = 750;
				//            var w = window.innerWidth;
				var w = $(window).width();
				/*if(w>375){
				    w = 375;
				}*/
				var irate = 625 / (iw / w);
				/*if(irate > 298.3333333333333){
				    irate = 288.3333333333333;
				}*/
				var str = 'html{font-size:' + irate + '%' + '}';
				var h_style = document.createElement("style");
				h_style.setAttribute("type", "text/css");
				h_style.innerHTML = str;
				document.getElementsByTagName('head')[0].appendChild(h_style);
			}
		</script>
	</head>

	<body>
		<div class="page_row" style="    background: #d0d5f5 url({if $game['phb_bg']}{$game['phb_bg']}{else}{$UrlPath}/images/bg_explain.png{/if}) no-repeat 0 bottom;
    background-size: contain; overflow: hidden; background-attachment: fixed;">
			<p style="height: 0.52rem;"></p>

                    <div class="top_box">
                        <p class="title">排行</p>
                        <p class="row_rule">规则</p>
                        <div class="click_rule">
                           <img src="{$UrlPath}/images/icon_jt.png" alt="" />
                            <p>通关额外加分！加分规则：  10000000/所用时间(秒）</p>
                        </div>
                    </div>
		

			<div class="row_content">
				<div class="title_content clearfix">
					<p class="mc">名次</p>
					<p class="name">勇士姓名</p>
					<p class="zj">战绩</p>
				</div>
				<ul id="top_container">
					{loop $list $k $v}
					{if $k == 0}
					<li class="clearfix" onclick="userCenter({$v['uid']})">
						<p class="order"><img src="{$UrlPath}/images/icon_gold.png" style="width: 0.6rem; height: 0.45rem;"></p>
						<p class="u_name"><img src="{$v['avatar']}" alt=""><span>{$v['username']}</span></p>
						<p class="game_store">{$v['score']}</p>
					</li>
					{elseif $k==1}
					<li class="clearfix" onclick="userCenter({$v['uid']})">
						<p class="order"><img src="{$UrlPath}/images/icon_sliver.png" style="width: 0.6rem; height: 0.45rem;"></p>
						<p class="u_name"><img src="{$v['avatar']}" alt=""><span>{$v['username']}</span></p>
						<p class="game_store">{$v['score']}</p>
					</li>
					{elseif $k==2}
					<li class="clearfix" onclick="userCenter({$v['uid']})">
						<p class="order"><img src="{$UrlPath}/images/icon_bronze.png" style="width: 0.6rem; height: 0.45rem;"></p>
						<p class="u_name"><img src="{$v['avatar']}" alt=""><span>{$v['username']}</span></p>
						<p class="game_store">{$v['score']}</p>
					</li>
					{else}
					<li class="clearfix" onclick="userCenter({$v['uid']})">
						<p class="order">{php echo ($k+1)}</p>
						<p class="u_name"><img src="{$v['avatar']}" alt=""><span>{$v['username']}</span></p>
						<p class="game_store">{$v['score']}</p>
					</li>
					{/if}
					{/loop}
				</ul>
<!--				<div id="loadmore" style="text-align:center;" onclick="loadmore()" data-page="1">加载更多</div>-->
			</div>
			<!--底部2种情况（未上榜、上榜）-->
			{if $uid}
			<div class="me_list">
				<div class="mlist_content clearfix">
					<p class="bang">{if $uid}上榜{else}未上榜{/if}</p>
					<p class="u_name"><img src="{$user['avatar']}" alt=""><span>{$user['nickname']}</span></p>					
					<p class="game_store">{$uid}</p>
				</div>
			</div>
			{/if}
		</div>
		<script>			
			var limit = 10;
                        var loadmore = $('#loadmore');
                        var top_container = $('#top_container');
                        var my_user_id = 0;
                     
                        $(function(){
                            $('.row_rule').click(showRule);
                            $('.row_rule p').css({'color':'#333'});
                            function showRule(){
                                if ($(".click_rule").css("display") == "none") {
                                    $(".click_rule").css("display", "inline");
                                } else {
                                    $(".click_rule").css("display", "none");
                                }
                            }
                            loadmore();
                        });
                        var position_value = 0;
                        function loadmore(){
                            var page = parseInt(loadmore.attr('data-page'));
                            var img_position = ['http://h5.qianfanyun.net/game2048/web/public/wap/images/icon_gold.png','http://h5.qianfanyun.net/game2048/web/public/wap/images/icon_sliver.png','http://h5.qianfanyun.net/game2048/web/public/wap/images/icon_bronze.png'];
                            var html = '';
                            var appendstr = '';
                            var insert_li;
                            $.ajax({
                                type : 'POST',
                                url : 'http://h5.qianfanyun.net/game2048/web/wap/default/Billboard',
                                dataType : 'json',
                                data : {third_app_token:getCookie('third_app_token'),'limit':limit,'aid':8,'page':page},
                                success : function(data){
                                    if(data.length>0){
                                        $.each(data,function(key,value){
                                            position_value++;
                                            $insert_li = $('<li class="clearfix" onclick="javascript:QFH5.jumpUser('+value.user_id+')"></li>');
                                            if(position_value<=3){
                                                html = '<p class="order"><img src="'+img_position[position_value-1]+'" style="width: 0.6rem; height: 0.45rem;" /></p><p class="u_name"><img src="'+value['avatar']+'" alt=""><span>'+value['username']+'</span></p><p class="game_store">'+value['score']+'</p>';
                                            }else{
                                                html = '<p class="order">'+position_value+'</p><p class="u_name"><img src="'+value['avatar']+'" alt=""><span>'+value['username']+'</span></p><p class="game_store">'+value['score']+'</p>';
                                            }
                                            $insert_li.append(html);
                                            if(my_user_id > 0 && my_user_id == value['id']){
                                                $insert_li.addClass('highlight')
                                            }
                    //                        appendstr = appendstr + $insert_li;
                                            $('#top_container').append($insert_li);
                                        });
                    //                    $('#top_container').append(appendstr);
                                        $loadmore.attr('data-page',page+1).addClass('click_more');
                                    }else{
                                        $loadmore.html('没有更多排名').addClass('nomore');
                                    }
                                }
                            });
                        }
                    </script>
                    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	</body>

</html>